<template>
	<div class="ConfigDialog-bg">
		<div class="ConfigDialog">
			<div class="left-view">
				<div class="title">
					<h4>{{ $t("message.config_dialog.title_9") }}</h4>
					<i class="el-icon-close" @click="closeDialog"></i>
				</div>
				<el-form ref="infoForm" :model="form" label-width="130px" class="config-form" :rules="rules">
					<!-- <el-form-item :label="$t('message.config_dialog.title_10')">
						<div class="img-view">
							<img src="../../assets/img/pic_default_avatar.png" alt="" class="avatar" />
						</div>
					</el-form-item> -->
					<el-form-item label="ユーザID">
						<el-input class="yellow" v-model="form.loginId" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item :label="$t('message.userPageTable.uname')" prop="">
						<el-input class="orange" v-model="form.name" :disabled="accType == 3"></el-input>
					</el-form-item>
					<el-form-item :label="$t('message.userPageTable.email')" prop="">
						<el-input class="" v-model="form.email"></el-input>
					</el-form-item>
					<!-- <el-form-item :label="$t('message.userPageTable.mobile')" prop="">
						<el-input class="yellow" v-model="form.mobile" :disabled="accType == 3"></el-input>
					</el-form-item> -->
					<el-form-item :label="$t('message.userPageTable.paw')">
						<div class="psw-view">
							<el-input class="yellow" v-model="form.pwd" disabled></el-input>
							<el-button style="width: 120px !important;" class="Acss" @click="changePswFlag = true">
								{{ $t("message.config_dialog.title_1") }}
							</el-button>
						</div>
					</el-form-item>
					<!-- <el-form-item :label="$t('message.cadViewer.saveAsFileDialog.input_company')">
            <el-input v-model="form.company"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.cadViewer.saveAsFileDialog.input_dept')">
            <el-input v-model="form.dept"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.cadViewer.saveAsFileDialog.input_addr')">
            <el-input v-model="form.addr"></el-input>
          </el-form-item> -->
				</el-form>
				<div class="footer">
					<el-button @click="closeDialog">Cancel</el-button>
					<el-button type="primary" style="width: 86px !important;" @click="onOkClick">
						OK
					</el-button>
				</div>
			</div>
			<!-- 修改密码 -->
			<div class="right-view" v-if="changePswFlag">
				<div class="title">
					<h4>{{ $t("message.config_dialog.title_1") }}</h4>
					<i class="el-icon-close" @click="changePswFlag = false"></i>
				</div>
				<!-- <el-form ref="formLabelAlign" :model="pswForm" label-width="170px" class="config-form" :rules="rules"> -->
				<el-form ref="formLabelAlign" :model="pswForm" label-width="170px" class="config-form">
					<!-- <el-form-item label="現行パスワード：">
            <el-input v-model="pswForm.oldPwd" disabled type='password'></el-input>
          </el-form-item> -->
					<el-form-item :label="$t('message.config_dialog.title_2')" prop="pass">
						<el-input v-model="pswForm.passWord" :type="pswForm.showOnce ? 'text' : 'password'"
							class="formLabelAlign-ipt orange">
							<el-image :src="pswForm.showOnce
								? uncheckImg
								: checkImg
								" slot="suffix" alt="" style="margin-top: 8px; width: 25px; height: 25px;" @click="
									pswForm.showOnce =
									!pswForm.showOnce
									"></el-image>
						</el-input>
					</el-form-item>
					<el-form-item :label="$t('message.config_dialog.title_3')" prop="checkPass">
						<el-input v-model="pswForm.checkPassWord" :type="pswForm.showTwice ? 'text' : 'password'"
							class="formLabelAlign-ipt orange">
							<el-image :src="pswForm.showTwice
								? uncheckImg
								: checkImg
								" slot="suffix" alt="" style="margin-top: 8px; width: 25px; height: 25px;" @click="
									pswForm.showTwice =
									!pswForm.showTwice
									"></el-image>
						</el-input>
					</el-form-item>
					<div class="footer">
						<el-button @click="changePswFlag = false">Cancel</el-button>
						<el-button type="primary" style="width: 86px !important;" @click="changeOrgUserPwdApi">
							OK
						</el-button>
					</div>
				</el-form>
			</div>
			<!-- 修改头像 -->
			<div class="right-view update-view" v-if="changImgFlag">
				<div class="title">
					<h4>{{ $t("message.config_dialog.title_4") }}</h4>
					<i class="el-icon-close" @click="changImgFlag = false"></i>
				</div>
				<div class="content">
					<div class="left">
						<p>{{ $t("message.config_dialog.title_5") }}</p>
						<div class="img-show-view">
							<img src="../../assets/img/pic_default_avatar.png" alt="" />
						</div>
						<p style="color: rgba(0, 0, 0, 0.45)">
							{{ $t("message.config_dialog.title_6") }}
						</p>
					</div>
					<div class="right">
						<el-upload class="upload-demo" drag :action="updateUrl" multiple>
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">
								{{ $t("message.config_dialog.title_7")
								}}<em>{{
									$t("message.config_dialog.title_8")
								}}</em>
							</div>
						</el-upload>
					</div>
				</div>
				<div class="footer">
					<button @click="changImgFlag = false">Cancel</button>
					<button style="background: #106ebe; color: #fff">OK</button>
				</div>
			</div>
			<el-dialog :visible.sync="showDialog" width="30%" :append-to-body="true" :close-on-click-modal="false"
				:close-on-press-escape="false" :show-close="false">
				<span>{{ $t("message.userPageTable.reloginTip") }}</span>
				<span slot="footer" class="dialog-footer">
					<!-- <el-button @click="showDialog = false">{{
					$t("message.public.cancel")
				}}</el-button> -->
					<el-button type="primary" @click="relogin()">{{
						$t("message.public.confirm")
					}}</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import {
	getLoginUserInfo,
	updateLoginUserInfo,
	changeOrgUserPwd,
} from "../../api/api";
import BASE from "../../utils/base";
import { deLcalStorage, getLocalStorage } from "../../utils/storage";
import md5 from "js-md5";
// 导出模块
export default {
	// 模块名字
	name: "ConfigDialog",
	// 模块数据
	data() {
		//数据
		var validatePass = (rule, value, callback) => {
			console.log(value);
			if (
				!/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{6,20}$/.test(
					this.pswForm.passWord
				)
			) {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkPsd"))
				);
			} else {
				if (
					this.pswForm.passWord !== "" &&
					/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{6,20}$/.test(
						this.pswForm.passWord
					)
				) {
					this.$refs.formLabelAlign.validateField("checkPass");
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (this.pswForm.passWord !== this.pswForm.checkPassWord) {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkPsdTip")
					)
				);
			} else {
				callback();
			}
		};

		var checkMobile = (rule, value, callback) => {
			if (
				// !/^(((\\+\\d{2}-)?0\\d{2,3}-\\d{7,8})|bai((\\+\\d{2}-)?(\\d{2,3}-)?([1][3,4,5,7,8][0-9]\\d{8})))$/.test(
				// !(/^1[345678]\d{9}$/.test(
				!/^1[345678]\d{9}$/.test(value)
			) {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkMobile")
					)
				);
			} else {
				callback();
			}
		};

		var checkEmail = (rule, value, callback) => {
			if (
				!/^([A-Za-z0-9_+-.])+@([A-Za-z0-9\-.])+\.([A-Za-z]{2,22})$/.test(
					value
				)
			) {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkEmail"))
				);
			}
		};
		var checkAcc = (rule, value, callback) => {
			if (value == "") {
				callback(this.$t("message.userPageTable.rules.checkUserName"));
			}
		};
		var checkName = (rule, value, callback) => {
			if (value == "") {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkName"))
				);
			}
		};
		var checkAccType = (rule, value, callback) => {
			if (value == "") {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkUserType")
					)
				);
			}
		};
		return {
			showDialog: false,
			checkImg: require("@/assets/img/icon_but_hide_dark@2x.png"),
			uncheckImg: require("@/assets/img/icon_but_display_dark@2x.png"),
			accType: getLocalStorage("accType"),
			rules: {
				acc: [{ validator: checkAcc, trigger: "blur", required: true }],
				pass: [
					{
						validator: validatePass,
						trigger: "blur",
						required: true,
					},
				],
				checkPass: [
					{
						validator: validatePass2,
						trigger: "blur",
						required: true,
					},
				],
				mobile: [
					{ validator: checkMobile, trigger: "blur", required: true },
				],
				email: [
					{ validator: checkEmail, trigger: "blur", required: true },
				],
				name: [
					{ validator: checkName, trigger: "blur", required: true },
				],
				checkAccType: [
					{
						validator: checkAccType,
						trigger: "blur",
						required: true,
					},
				],
			},
			form: {
				id: "", // 用户名
				pwd: "", // 密码
				name: "", // 姓名
				sex: "", //
				age: 0,
				idNumber: "",
				mobile: "", // 电话
				email: "", // 邮箱
				creater: "",
				// company: "", // 公司
				// dept: "", // 部门
				// addr: "", // 地址
				headUrl: "",
				acc: "",
				accType: 0,
				type: "",
				modifier: "",
			},
			pswForm: {
				oldPwd: getLocalStorage("password"),
				passWord: "",
				checkPassWord: "",
				showOnce: false,
				showTwice: false,
			},
			changePswFlag: false,
			changImgFlag: false,
			updateUrl: `${BASE.IP}/api/User/changeOrgUserHeader`,
			userData: {},
		};
	},
	// 注册组件
	components: {},
	// 监听指定值，只有指定值变化，才会触发
	watch: {},
	// 里面的函数只有调用才会执行（实时计算）里面是定义的方法
	methods: {
		closeDialog() {
			this.$emit("CloseConfigDialog");
		},
		//获取用户信息(不返回密码信息)
		getLoginUserInfoApi() {
			getLoginUserInfo().then((res) => {
				console.log(res);
				if (res.data.code != 0) {
					return;
				}
				this.form.id = res.data.data.userId;
				this.form.loginId = res.data.data.acc;
				this.form.name = res.data.data.name;
				this.form.email = res.data.data.email;
				this.form.mobile = res.data.data.mobile;
				// this.form.company = res.data.data.company;
				// this.form.dept = res.data.data.dept;
				// this.form.addr = res.data.data.addr;
				this.form.pwd = "************************";
				this.userData = res.data.data;
			});
		},

		checkIsInfoChanged() {
			let re = {};
			re.acc = this.userData.acc;
			re.Name = this.userData.name;
			re.changed = false;
			if (
				this.form.name != this.userData.name ||
				this.form.email != this.userData.email ||
				this.form.mobile != this.userData.mobile
				// ||
				// this.form.company != this.userData.company ||
				// this.form.dept != this.userData.dept ||
				// this.form.addr != this.userData.addr
			) {
				re.changed = true;
			}

			re.Name = this.form.name;
			re.email = this.form.email;
			re.mobile = this.form.mobile;
			// re.company = this.form.company;
			// re.dept = this.form.dept;
			// re.addr = this.form.addr;

			return re;
		},

		onOkClick() {
			

			let isChange = this.checkIsInfoChanged();
			
			this.updateLoginUserInfoApi(isChange);
			
		},

		//当前登录账号修改用户信息
		updateLoginUserInfoApi(form) {
			updateLoginUserInfo(form).then((res) => {
				console.log(res);
				if (res.data.code != 0) {
					
					this.$alert(res.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return
				} else {
					this.$message({
						message: 'OK',
						type: "success",
					});
					this.closeDialog();
				}
			});
		},
		//当前登录账号更新密码，需要检査旧密码
		changeOrgUserPwdApi() {
			let dataJson = {
				account: this.form.loginId,
				// account: this.userName.trim(),
				oldPwd: this.pswForm.oldPwd,
				newPwd: this.pswForm.passWord,
				ConfPwd: this.pswForm.checkPassWord
			};
			console.log(dataJson, "222222222222")
			changeOrgUserPwd(dataJson)
				.then((res) => {
					if (res.data.code != 0) {
						
						this.$alert(res.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
						return;
					}
					this.showDialog = true;
					// console.log(res)
					// this.$router.push("/");
					// deLcalStorage("activeClass");
					// deLcalStorage("accType");
					// deLcalStorage("token");
					// sessionStorage.token = null;
					// this.changePswFlag = false;
				})
				.finally(() => {

				});
		},
		relogin() {
			this.showDialog = false;
			this.$router.push("/");
			deLcalStorage("activeClass");
			deLcalStorage("accType");
			deLcalStorage("token");
			sessionStorage.token = null;
		},
	},
	// 创建前状态(里面是操作)
	beforeCreate() { },
	// 创建完毕状态(里面是操作)
	created() { },
	// 挂载前状态(里面是操作)
	beforeMount() { },
	// 挂载结束状态(里面是操作)
	mounted() {
		this.getLoginUserInfoApi();
	},
	// 更新前状态(里面是操作)
	beforeUpdate() { },
	// 更新完成状态(里面是操作)
	updated() { },
	// 销毁前状态(里面是操作)
	beforeDestroy() { },
	// 销毁完成状态(里面是操作)
	destroyed() { },
};
</script>

<style lang="scss" scoped>
.ConfigDialog-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.3);
}

.ConfigDialog {
	//   width: 988px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.left-view {
	width: 528px;
	padding-bottom: 32px;
	margin-right: 16px;
	background: #ffffff;
	box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
		0px 9px 28px 0px rgba(0, 0, 0, 0.08),
		0px 6px 16px -8px rgba(0, 0, 0, 0.15);

	.yellow {
		::v-deep .el-input__inner {
			background: #ffffe1 !important;
		}
	}

	.orange {
		::v-deep .el-input__inner {
			background-color: #FEDDB1;
		}
	}
}

.right-view {
	width: 528px;
	height: 258px;
	background: #ffffff;
	box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
		0px 9px 28px 0px rgba(0, 0, 0, 0.08),
		0px 6px 16px -8px rgba(0, 0, 0, 0.15);

	.yellow {
		::v-deep .el-input__inner {
			background: #ffffe1 !important;
		}
	}

	.orange {
		::v-deep .el-input__inner {
			background-color: #FEDDB1;
		}
	}
}

.update-view {
	height: 408px;

	.content {
		width: 100%;
		height: 286px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 16px;
		border-bottom: 1px solid #f0f0f0;

		.left,
		.right {
			width: 50%;
			height: 100%;
			padding: 16px 24px;

			.upload-demo {
				margin-top: 31px;
				width: 160px;
				height: 160px;
			}
		}

		.left {
			p {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.85);
			}

			.img-show-view {
				width: 160px;
				height: 160px;
				margin: 16px 0;

				img {
					width: 100%;
					height: auto;
				}
			}
		}

		.right {
			::v-deep .el-upload-dragger {
				width: 200px;
				height: 200px;
			}
		}
	}
}

.title {
	width: 100%;
	height: 42px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24px;
	border-bottom: 1px solid #f0f0f0;

	h4 {
		font-size: 16px;
		font-weight: 600;
	}

	.el-icon-close {
		font-size: 16px;
		cursor: pointer;
	}
}

.config-form {
	margin-top: 18px;

	::v-deep .el-form-item {
		margin-bottom: 12px;
	}

	::v-deep .el-input__inner {
		width: 368px;
		height: 32px;
	}

	.psw-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		::v-deep .el-input__inner {
			width: 248px;
			border-radius: 4px 0 0 4px;
		}

		::v-deep .el-input {
			width: 248px;
		}

		button {
			line-height: 32px;
			text-align: center;
			width: 120px;
			height: 32px;
			border-radius: 0px 4px 4px 0px;
			border: 1px solid #d9d9d9;
			border-left: none;
			margin-top: 3px;
		}
	}
}

.img-view {
	position: relative;
	width: 66.4px;
	height: 66.4px;
	overflow: hidden;

	.avatar {
		width: 66.4px;
		height: 66.4px;
		border-radius: 50%;
		cursor: pointer;
	}

	.edit {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #fff;
		cursor: pointer;
		background: rgba(0, 0, 0, 0.3);
		transition: 1s;
		opacity: 0;
	}
}

.footer {

	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 32px;
	width: 489px;
	height: 32px;

	button {
		width: 82px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		// outline: none;
		margin-left: 16px;
		border-radius: 4px;
	}
}

.img-view:hover .edit {
	opacity: 1;
}

.formLabelAlign-ipt {
	width: 320px;

	::v-deep .el-input__inner {
		width: 320px;
	}
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

::v-deep {
	.Acss {
		span {
			transform: translateX(-9px);
			display: inline-block;
		}
	}
}
</style>
